$(function () {
  var { layer, form, laypage } = layui;
  // 获取当前页面数据并通过模板引擎渲染
  // 定义分页全局变量
  var params = {
    pagenum: 1, // 当前所在页码
    pagesize: 1, // 一页显示多少条
    cate_id: '', // 文章分类的id
    state: '已发布', // 已发布或草稿
  };
  // 调用获取文章列表数据方法
  getArticleList(params);
  // 调用获取所有分类的函数
  getCatList();


  // 给删除按钮绑定点击事件
  $('body').on('click', '#article-delete', function () {
    // console.log(6666)
    // 1. 获取要删除id
    var id = $(this).data('id')
    // 获取删除按钮的个数
    var len = $('.btn-delete').length
    // 2. 给弹窗
    layer.confirm('确定要删除么？', {icon: 3, title:'删除'}, function(index){
      // do something
      // 3. 删除
      $.ajax({
        url: '/my/article/delete/' + id,
        method: 'get',
        success: function (res) {
          // console.log(res, 111)
          layer.msg(res.message)
          if (res.status !== 0) return
          if (len === 1) {
            // 如果 len 的值等于1，证明删除完毕之后，页面上就没有任何数据了
            // 页码值最小必须是 1
            q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1
          }
          // 成功 重新获取列表数据
          getArticleList(params);
        }
      })
      layer.close(index);
    });
  })
  // 监听筛选按钮提交事件
  $('.layui-form-list').on('submit', function (e) {
    e.preventDefault();
    // 获取下拉列表中对应的值
    var obj = form.val('formArticleList');
    // console.log(params)
    params.cate_id = obj.cate_id;
    params.state = obj.state;
    // 重新获取列表数据
    getArticleList(params);
  });
  // 定义获取文章列表数据方法
  function getArticleList(data) {
    // 发送请求
    $.ajax({
      url: '/my/article/list',
      data: data,
      success: function (data) {
        // console.log(data, 121121);
        // 1. 使用模板引擎渲染
        var tableStr = template('article-table-tpl', data); // {data: []}
        // console.log(tableStr)
        // 2. 放到页面中
        $('tbody').html(tableStr);
        // 调用初始化的initPage函数
        // 获取后台返回给我的总条数
        initPage(data.total);
      },
    });
  }
  // 定义获取所有类别的函数
  function getCatList() {
    $.ajax({
      url: '/my/article/cates',
      method: 'get',
      success: function (res) {
        // console.log(res, 22222)
        if (res.status !== 0) return layer.msg(res.message);
        // 成功处理逻辑
        var arr = [];
        for (var i = 0; i < res.data.length; i++) {
          var item = `<option value="${res.data[i].Id}">${res.data[i].name}</option>`;
          arr.push(item);
        }
        // console.log(arr, 66655588999954)
        var resultStr = arr.join('');
        // console.log(resultStr);
        $('.cate-select').html(resultStr);
        // 为什么没有被渲染出来？？？
        // 因为不是爱情
        form.render('select');
      },
    });
  }
  // 封装一个分页初始化的函数
  function initPage(total) {
    //执行一个laypage实例
    laypage.render({
      elem: 'mypage', // 注意，这里的mypage 是 ID，不用加 # 号
      count: total || 1, // 数据总数，从服务端得到
      curr: params.pagenum,
      limit: params.pagesize, // 每页显示的条数
      limits: [1, 2, 3, 10, 20], // 每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
      layout: ['prev', 'page', 'next', 'limit'], // 自定义排版
      jump: function(obj, first) {
        //obj包含了当前分页的所有参数，比如：
        // console.log(obj.curr);  // 得到当前页，以便向服务端请求对应页的数据。
        // console.log(obj.limit); // 得到每页显示的条数
        params.pagenum = obj.curr
        params.pagesize = obj.limit
        // 重新调用获取文章列表的数据并渲染
        // getArticleList(params);
        // 首次不执行
        // 1. 第一次渲染分页会触发jump方法
        // 2. 当你切换你了分页参数 他也会触发jump
        if(!first){
          //do something
          // 重新调用获取文章列表的数据并渲染
          getArticleList(params);
        }
      }
    });
  }
});
template.defaults.imports.dateFormat = function (date) {
  // 原始的时间
  var t = new Date(date);
  // 获取年月日时分秒
  var y = t.getFullYear();
  // 字符串.padStart(填充后总字符长度, 要填充的字符)
  //padStart往字符的前面追加 padEnd从后面追加
  var m = (t.getMonth() + 1).toString().padStart(2, '0');
  var d = t.getDate().toString().padStart(2, '0');
  var h = t.getHours().toString().padStart(2, '0');
  var mm = t.getMinutes().toString().padStart(2, '0');
  var ss = t.getSeconds().toString().padStart(2, '0');
  // 记得将处理后的时间返回
  return `${y}/${m}/${d} ${h}:${mm}:${ss}`;
};
